<template>
  <div class="background-area" ref="backgroundRef"></div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { getNewImage } from "./hooks"
const backgroundRef = ref(null);
onMounted(() => {
  getNewImage().then(res => {
    backgroundRef.value.style.backgroundImage = `url(${res})`;
  })
})
</script>

<style scoped>
.background-area {
  position: fixed;
  width: 100%;
  height: 100%;
  opacity: 0.72;
  z-index: -1;
  filter: blur(5px) brightness(.6);
  background-repeat: no-repeat;
  background-size: cover;
}
</style>
